<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>setting</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>
		<style>
		   body{padding-bottom: 4.8rem;}
		   dd{margin: 0;}
		   .mui-bar-nav {
			    background-color: #71BB98;
			}
			.mui-bar-nav a{color:#fff;}
			.mui-title{color:#fff;font-size:1.2rem;}
		   .mui-content-padded{margin-top: 1rem;}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
			.chart_bot{
				position: relative;
				background: #fff;
				padding:1rem;
				padding-top:0.5rem;
				width:100%;
			}
			
			.chart_bot h2{
				font-size: 1.1rem;
				font-weight: 500;
				color:#F47D00;
				border-left:5px solid #5b72f4;
				padding-left: 0.5rem;
				line-height: 1.5rem;
			}
			
			.mui-media-body{line-height: 42px;}
			.mui-table-view{background: transparent;}
			.mui-table-view-cell{padding:0;margin:-10px 0;}
			.mui-table-view:before{height: 0;}
			.mui-table-view:after{height: 0;}
			#start img{width: 50%;height:50%;display: block;margin: 0 auto;max-height: 6rem;}
			.btn{display: block; margin:1rem auto;}
			.orderto{text-align: center;margin-top: 2rem;}
			.orderto a{width: 15%;}
			.abnormal{height: 2rem;}
		    .abnormal label{width: 13%;min-width: 100px;text-align: right;margin-top:0.3rem;font-size: 0.8rem;}
			.abnormal input{width: 68%;height:1.5rem;margin-bottom: 0; min-width:130px;background: transparent;font-size: 0.8rem;}
			.Lef .abnormal label{width: 29%;min-width: 70px;text-align: right;margin-top:0.3rem;font-size: 0.8rem;}
			.Lef .abnormal input{width: 60%;min-width:130px;background: transparent;font-size: 0.8rem;
			padding: 8px 4px; height: 1.5rem;margin-bottom: 0;margin-left: 0.6rem;}
			.Rig .abnormal label{width: 20%;min-width:44px;text-align: right;margin-top:0.3rem;font-size: 0.8rem;}
			.Rig .abnormal input{width: 60%;min-width:130px;background: transparent;font-size: 0.8rem;
			padding: 8px 4px; height: 1.5rem;margin-bottom: 0;margin-left: 0.8rem;}
			.button{padding: 0 1rem;margin-top: 2rem;}
			.button a{width: 13%;}
			.mui-bar-tab .mui-tab-item {
			    background: #71bb9a;
			    color: #fff;
			}
			.mui-bar-tab .mui-tab-item.mui-active {
			    color: red;
			}
			.phot_wrap{height: 9rem;}
			.phot_wrap{position: relative;}
			.mui-button-row{position: absolute;bottom:10px;width: 100%;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">设置</h1>
		</header>
		<div class="mui-content">
			<div class="mui-row">
				<div class="mui-col-xs-4">
					<div class="mui-content-padded">
						<div class="chart_bot">
							<h2>头像设置</h2>
							<hr style="margin-bottom: 1rem;" />
							<div class="phot_wrap">
								<div class="showimg" id="start">
										<img src="../img/u38.png" id="PIC">
									
								</div>
								
							    <button type="button" id="btnImg" onclick="imgupgrade()" class="mui-btn mui-btn-blue btn">更换头像</button>
							</div>
							
						</div>
						
					</div>
				</div>
				<div class="mui-col-xs-8">
					<div class="mui-content-padded">
						<div class="chart_bot">
							<h2>个人信息设置</h2>
							<hr style="margin-bottom: 1rem;" />
							<form action="" method="post" id="infoSet">
								<div class="mui-row phot_wrap">
									<div class="mui-col-xs-6 Lef">
										<div class="abnormal">
											<label class="mui-pull-left">姓名</label>
											<input type="text" class="mui-pull-left" id="names" value="" required="required" />
											<div class="mui-clearfix"></div>
										</div>

										<div class="abnormal">
											<label class="mui-pull-left">部门</label>
											<input type="text" class="mui-pull-left" value="" id="bumen" required="required" />
											<div class="mui-clearfix"></div>
										</div>
									</div>
									<div class="mui-col-xs-6 Rig">
										<div class="abnormal">
											<label class="mui-pull-left">单位</label>
											<input type="text" class="mui-pull-left" value="" id="danwei" required="required" />
											<div class="mui-clearfix"></div>
										</div>

									</div>
									<div class="mui-button-row">
										 <button type="button" class="mui-btn mui-btn-primary mui-pull-right" id="submitinfo" style="margin-left: 0.5rem;margin-right: 1.5rem;">保存</button>
										 <button type="button" id="resetInfo" class="mui-btn mui-btn-primary mui-pull-right">取消</button>
									</div>
								</div>
							</form>
							
						</div>
						
					</div>
				</div>
			</div>
			<div class="mui-content-padded">
				<form action="" method="post">
					 <div class="chart_bot">
						<h2>通讯录设置</h2>
						<hr style="margin-bottom: 1rem;" />
						<div class="abnormal">
							<label class="mui-pull-left">手机号码：</label>
							<input type="text" class="mui-pull-left" value="" id="phone" required="required" />
							<div class="mui-clearfix"></div>
						</div>
						<div class="abnormal">
							<label for="" class="mui-pull-left">电子邮箱：</label>
							<input type="email" class="mui-pull-left" value="" id="email" required="required" />
							<div class="mui-clearfix"></div>
						</div>
						<div class="abnormal">
							<label for="" class="mui-pull-left">通讯地址：</label>
							<input type="text" class="mui-pull-left" value="" id="address" required="required" />
							<div class="mui-clearfix"></div>
						</div>
						<div class="abnormal" style="margin-top: 0.7rem;">
							 <button type="button" class="mui-btn mui-btn-primary mui-pull-right" id="submitXun" style="margin-left: 0.5rem;margin-right: 1.5rem;">保存</button>
							 <button type="button" id="resetXun" class="mui-btn mui-btn-primary mui-pull-right">取消</button>
						</div>
					</div>
				</form>
				
				
			</div>
			
			<div class="mui-content-padded">
				
					<div class="chart_bot">
						<h2>账号设置</h2>
						<hr style="margin-bottom: 1rem;" />
						<div class="abnormal">
							<label class="mui-pull-left">用户名：</label>
							<input type="text" class="mui-pull-left" id="username" readonly="readonly" value="XXX" required="required" />
							<div class="mui-clearfix"></div>
						</div>
				<form action="" method="post" id="pas">
						<div class="abnormal">
							<label for="" class="mui-pull-left">原密码：</label>
							<input type="password" class="mui-pull-left" id="passwordOld" value="" required="required" />
							<div class="mui-clearfix"></div>
						</div>
						<div class="abnormal">
							<label for="" class="mui-pull-left">修改密码：</label>
							<input type="password" class="mui-pull-left" id="password" value="" required="required" />
							<div class="mui-clearfix"></div>
						</div>
						<div class="abnormal">
							<label for="" class="mui-pull-left">确认密码：</label>
							<input type="password" class="mui-pull-left" value="" id="password_confirm" required="required" />
							<div class="mui-clearfix"></div>
						</div>
						<div class="abnormal" style="margin-top: 0.7rem;">
							 <button type="button" id="send" class="mui-btn mui-btn-primary mui-pull-right" style="margin-left: 0.5rem;margin-right: 1.5rem;">保存</button>
							 <button type="reset"  class="mui-btn mui-btn-primary mui-pull-right">取消</button>
						</div>
					</div>
				</form>
	
			</div>
			<div class="mui-content-padded">
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="exit">退出</button>
			</div>

		</div>
	
		<script src="../js/mui.min.js"></script>
		
	</body>
    <script>
         //
            var user = JSON.parse(localStorage.getItem('$users')).account;
            var PIC = document.getElementById('PIC');
            var names = document.getElementById('names');
            var danwei = document.getElementById('danwei');
            var bumen = document.getElementById('bumen');
            var phone = document.getElementById('phone');
            var email = document.getElementById('email');
            var address = document.getElementById('address');
            var username = document.getElementById('username');
            var infoSet = document.getElementById('infoSet');
            var submitinfo = document.getElementById('submitinfo');
            var submitXun = document.getElementById('submitXun');
            var resetXun = document.getElementById('resetXun');
            var resetInfo = document.getElementById('resetInfo');
            submitinfo.addEventListener('tap',function(){
            	mui.ajax({
		            type: "post",
				    url: __PATH__+"index/setting_per",
				    async: true,
				    data:{
				    	realname:names.value,
				    	unit:danwei.value,
				    	department:bumen.value,
				    	user:user
				    },
				    dataType: "json",
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
				    	console.log(data);
				    	if(data.code==200){
				    		alert("修改成功！")
				    	}else if(data.code==400){
				    		alert("修改失败！！");
				    	}
				    },
				    error:function(xhr,type,errorThrown){
						mui.alert(xhr,'提示') 				
					}
				});
            });
            submitXun.addEventListener('tap',function(){
            	console.log(phone.value+email.value+address.value)
            	mui.ajax({
		            type: "post",
				    url: __PATH__+"index/setting_addr",
				    async: true,
				    data:{
				    	phone:phone.value,
				    	email:email.value,
				    	address:address.value,
				    	user:user
				    },
				    dataType: "json",
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
				    	console.log(data);
				    	
				    },
				    error:function(xhr,type,errorThrown){
						mui.alert(xhr,'提示') 				
					}
				});
            });
            resetXun.addEventListener('tap',function(){
            	 mui.ajax({
		            type: "post",
				    url: __PATH__+"index/setting",
				    async: true,
				    data:{
				    	user:user
				    },
				    dataType: "json",
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
//				    	console.log(data);
				    	phone.value=data.phone;
				    	email.value=data.email;
				    	address.value=data.address;
				    },
				    error:function(xhr,type,errorThrown){
						mui.alert(xhr,'提示') 				
					}
				});
            });
            resetInfo.addEventListener('tap',function(){
            	mui.ajax({
		            type: "post",
				    url: __PATH__+"index/setting",
				    async: true,
				    data:{
				    	user:user
				    },
				    dataType: "json",
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
//				    	console.log(data);
				    	names.value=data.realname;
				    	danwei.value=data.unit;
				    	bumen.value=data.department;
				    }
				});
            });

            function send(){
		     	mui.ajax({
		            type: "post",
				    url: __PATH__+"index/setting",
				    async: true,
				    data:{
				    	user:user
				    },
				    dataType: "json",
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
//				    	console.log(data);
				    	PIC.src=__PATH__+data.img;
				    	names.value=data.realname;
				    	danwei.value=data.unit;
				    	bumen.value=data.department;
				    	phone.value=data.phone;
				    	email.value=data.email;
				    	address.value=data.address;
				    	username.value=data.username;
				    },
				    error:function(xhr,type,errorThrown){
						mui.alert(xhr,'提示') 				
					}
				});
		     };
         setTimeout("send()",400);
        //
		(function($, doc) {
			$.init();
            
            //
			$.plusReady(function() {
				//照相入口
				var btn = document.getElementById('start');
//				var img = document.getElementById('imgs1');
					btn.addEventListener('tap',function(){
						var btnArray = [{title:"照相机"},{title:"相册"}]; //选择按钮  1 2 3
						plus.nativeUI.actionSheet({
						    title:"请选择",
						    cancel:"取消", // 0
						    buttons:btnArray
						    }, 
						    function(e){
						        var index = e.index; // 
						        switch (index){
						            case 1:
						                //写自己的逻辑
						             	cameraimages();
						            break;
						            case 2:
						            	galleryImgs();
						            break;
						        }
						});
						
					});
				//--
				var sendButton = doc.getElementById('send');
				var passwordOld = doc.getElementById('passwordOld');
				var passwordBox = doc.getElementById('password');
				var passwordConfirmBox = doc.getElementById('password_confirm');
				sendButton.addEventListener('tap', function() {
					var regInfo = {
						password: passwordBox.value
					};
					var passwordConfirm = passwordConfirmBox.value;
					if(regInfo.password==""){
						alert("新密码不能为空")
					}
					if (passwordConfirm != regInfo.password) {
						plus.nativeUI.toast('密码两次输入不一致');
						return;
					}else{
						mui.ajax({
				            type: "post",
						    url: __PATH__+"index/setting_acc",
						    async: true,
						    data:{
						    	user:user,
						    	password:passwordOld.value,
						    	newpassword:passwordBox.value
						    },
						    dataType: "json",
						    json: "jsoncallback",
						    timeout: 1000,
						    success: function(data) {
						    	console.log(data);
						    	if(data.code==200){
						    		alert("密码修改成功！")
						    	}else{
						    		alert("密码修改失败！")
						    	}
						    
						    },
						    error:function(xhr,type,errorThrown){
								mui.alert(xhr,'提示') 				
							}
						});
					}
					 
				});
				//
				//退出操作******************
				document.getElementById('exit').addEventListener('tap', function() {
					if (mui.os.ios) {
						app.setState({});
						mui.openWindow({
							url: 'login.html',
							id: 'login',
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
						return;
					}
					var btnArray = [ {
						title: "直接关闭应用"
					}];
					plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: btnArray
					}, function(event) {
						var index = event.index;
						switch (index) {
							case 1:
							    localStorage.clear();
								plus.runtime.quit();
								break;
						}
					});
				}, false);
				 //************************
				//
			});
			//
			
		}(mui, document));
		
		//上传单张图片
		function galleryImg() {
		    //每次拍摄或选择图片前清空数组对象
			f1.splice(0, f1.length);
			document.getElementsByClassName("showimg")[0].innerHTML = null;
			// 从相册中选择图片
			mui.toast("从相册中选择一张图片");
			plus.gallery.pick(function(path) {
			    showImg(path);
			}, function(e) {
			    mui.toast("取消选择图片");
			}, {
			    filter: "image",
			    multiple: false
			});
		}

		function galleryImgs() {
		        //每次拍摄或选择图片前清空数组对象
		    f1.splice(0, f1.length);
		    document.getElementsByClassName("showimg")[0].innerHTML = null;
		    // 从相册中选择图片
		    mui.toast("从相册中选择一张图片");
		    plus.gallery.pick(function(e) {
		                  if (e.files.length != 1) {
		                      mui.toast('请选择一张图片！！');
		                      return false;
		                  }
		        for (var i in e.files) {
		            showImg(e.files[i]);
		        }
		    }, function(e) {
		        mui.toast("取消选择图片");
		    }, {
		        filter: "image",
		        multiple: true
		    });
		}
        // 拍照添加文件
		function cameraimages() {
		        //每次拍摄或选择图片前清空数组对象
		    f1.splice(0, f1.length);
		    document.getElementsByClassName("showimg")[0].innerHTML = null;
		    var cmr = plus.camera.getCamera();
		    cmr.captureImage(function(p) {
		        plus.io.resolveLocalFileSystemURL(p, function(entry) {
		            var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
		            showImg(localurl);
		        });
		    }, function(e) {
		        mui.toast("很抱歉，获取失败 "+ e);
		    });
		}
            // 全局数组对象，添加文件,用于压缩上传使用
        var f1 = new Array();


		function showImg(url) {
		    // 兼容以“file:”开头的情况
		    if (0 != url.toString().indexOf("file://")) {
		        url = "file://" + url;
		    }
		    var _div_ = document.getElementsByClassName("showimg")[0];
		    var _img_ = new Image();
		    _img_.src = url; // 传过来的图片路径在这里用。
		        _img_.onclick = function() {
		                plus.runtime.openFile(url);
		            };
		    _img_.onload = function() {
		        var tmph = _img_.height;
		        var tmpw = _img_.width;
		        var isHengTu = tmpw > tmph;
		        var max = Math.max(tmpw, tmph);
		        var min = Math.min(tmpw, tmph);
		        var bili = min / max;
		        if (max > 1200) {
		            max = 1200;
		            min = Math.floor(bili * max);
		        }
		        tmph = isHengTu ? min : max;
		        tmpw = isHengTu ? max : min;
		        _img_.style.border = "1px solid rgb(200,199,204)";
		        _img_.style.margin = "10px";
		        _img_.style.width = "100px";
		        _img_.style.height = "200px";
		        _img_.onload = null;
		        plus.io.resolveLocalFileSystemURL(url, function(entry) {
		                entry.file(function(file) {
		//                  console.log(file.size + '--' + file.name);
		                    canvasResize(file, {
		                        width: tmpw,
		                        height: tmph,
		                        crop: false,
		                        quality: 50, //压缩质量
		                        rotate: 0,
		                        callback: function(data, width, height) {
		                            f1 = data.substr(data.indexOf(',')+1);
		                            _img_.src = data;
		                            _div_.appendChild(_img_);
		                            plus.nativeUI.closeWaiting();
		//                          console.log(data);
		                        }
		                    });
		                });
		            },
		            function(e) {
		                plus.nativeUI.closeWaiting();
		                console.log(e.message);
		            });
		    };
		};
				//上传
        function imgupgrade() {
                var wt = plus.nativeUI.showWaiting();
                var urls = __PATH__+'index/setting_img';
                var dataType = 'json';
                //发送数据  
                var data = {
                	photo:f1,	//base64
                	user:user
					}
				//成功响应的回调函数
		        var success = function(response) {
		        	var rrs = response;
		            plus.nativeUI.closeWaiting();
		            alert(response);
		            if (response) {
                        alert("上传成功！！")
//		                mui.openWindow({
//								url:"sub4.html",
//								id:"sub4.html",
//								style:{},
//							   extras:{
//								   	title:titleName,
//								   	workNo:workNo,
//								   	equipmentName:equipmentName,
//								   	assetNo:assetNo
//								   },
//								show:{
//									autoShow:true,
//									aniShow:"slide-in-right",
//									duration:100
//								},
//								waiting:{
//									autoShow:false,
//									title:"正在加载·····",
//									options:{
//						//				width:
//						//				height:
//									 }
//								 }
//							})
		            }else{
		            	alert("上传失败");
		            }
		        }
                mui.post(urls, data, success, dataType);
           }
	</script>
</html>